.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  // background-color: #f4f4f4;
}

.header{
  line-height: 60px;
  border-bottom: 1px solid #F5F5F5;
  color: #333;
  font-weight: 500;
  padding: 0 24px;
  // border-bottom: solid 1px #d6d6d6;
}

.scroll{
  flex: 1;
  overflow: auto;
  padding: 24px;
}
.clear-context {
  margin: 20px 0 0 0;
  padding: 4px 0;

  border-top: var(--border-in-light);
  border-bottom: var(--border-in-light);
  box-shadow: var(--card-shadow) inset;

  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--black);
  transition: all ease 0.3s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  font-size: 12px;

  animation: slide-in ease 0.3s;

  $linear: linear-gradient(
                  to right,
                  rgba(0, 0, 0, 0),
                  rgba(0, 0, 0, 1),
                  rgba(0, 0, 0, 0)
  );
  mask-image: $linear;

  @mixin show {
    transform: translateY(0);
    position: relative;
    transition: all ease 0.3s;
    opacity: 1;
  }

  @mixin hide {
    transform: translateY(-50%);
    position: absolute;
    transition: all ease 0.1s;
    opacity: 0;
  }

  &-tips {
    @include show;
    opacity: 0.5;
  }

  &-revert-btn {
    @include hide;
  }

  &:hover {
    opacity: 1;

    .clear-context-tips {
      // @include hide;
    }

    .clear-context-revert-btn {
      @include show;
    }
  }
}
